<template>
  <div v-if="show">
    <h2>Dashboard</h2>
    <button @click="show = !show">Toggle</button>

    <!-- 异步的 Profile -->
    <Profile />
  </div>
  <!-- 
  <h2 v-else>
    <Home />
  </h2> -->
</template>

<script>
import { defineAsyncComponent } from "vue";

export default {
  data() {
    return {
      show: true,
    };
  },
  components: {
    Profile: defineAsyncComponent(() => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(import("./Profile.vue"));
        }, 4000);
      });
    }),

    Home: defineAsyncComponent(() => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(import("./Home.vue"));
        }, 4000);
      });
    }),
  },
};
</script>
